<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :title="title4"
      :beforeClose="handleClose4"
      :visible.sync="dialogVisible4"
      width="500px">
      <el-form :model="sendForm" size="mini" label-width="130px" :rules="rules" ref="sendFormRef">
        <el-form-item label="联系人:" prop="contactName">
          <el-input v-model="sendForm.contactName" clearable style="width: 200px;" ></el-input>
        </el-form-item>

        <el-form-item label="手机号:" prop="contactMobile">
          <el-input v-model="sendForm.contactMobile" clearable style="width: 200px;" @blur="seachRepeat2(sendForm.contactMobile)"></el-input>
        </el-form-item>

        <el-form-item label="职务:" prop="contactDuty">
          <el-select
            v-model="sendForm.contactDuty"
            placeholder="请选择/输入"
            clearable
            filterable
            allow-create
            default-first-option>
            <el-option v-for="(item,index) in contactDutyList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否为主联系人:">
          <el-radio-group v-model="sendForm.isMainContact">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否有采购决定权:">
          <el-radio-group v-model="sendForm.isBuyPermission">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="关注点:">
          <el-input v-model="sendForm.contactFocus" style="width: 200px;" clearable></el-input>
        </el-form-item>

        <el-form-item label="生日:">
          <el-date-picker
            v-model="sendForm.contactBirthday"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width: 200px;">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="爱好:">
          <el-input v-model="sendForm.contactHobby" style="width: 200px;" clearable></el-input>
        </el-form-item>

        <el-form-item label="是否接收短信:">
          <el-radio-group v-model="sendForm.isSendSms">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer" v-if="materialDialogType!='see'">
          <el-button @click="handleClose4">取 消</el-button>
          <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4">确 定</el-button>
      </span>
      <span slot="footer" class="dialog-footer" v-else>
         <el-button @click="handleClose4">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  checkContactMobile,
} from '@/api/partner';
import {
  getCustomerInfoAPI,
} from '@/api/company';
import { validatePhone } from '@/utils/validate';
import {editContactAPI} from '@/api/fms';
const defaultsendForm = {
  customerId:'',
  customerName:'',
  contactId:'',//联系人
  contactName:'',//联系人
  contactMobile:'',//手机号
  contactDuty:'',//职务
  isMainContact:'',//是否主联系人
  isBuyPermission:'',//是否有采购决定权
  contactFocus:'',//关注的内容
  contactBirthday:'',//生日日期
  contactHobby:'',//爱好
  isSendSms:1,//是否接收短信
};
export default {
  name: "addContacts",
  data() {
    const isvalidatePhone = (rule, value, callback) => {
    if (!validatePhone(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    };
    return {
      sendForm:JSON.parse(JSON.stringify(defaultsendForm)),
      contactDutyList:[],
      title4: '',
      dialogVisible4: false,
      btnLoading4: false,
      materialDialogType: '',
      rules:{
        contactName: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        contactMobile: [
          { required: true, validator: isvalidatePhone, trigger: 'blur' },
        ],
        contactDuty: [
          { required: true, message: '请选择职务', trigger: 'change' }
        ],
        isSendSms: [
          { required: true, message: '请选择是否接受联系人', trigger: 'change' }
        ]
      },
    }
  },
  filters:{

  },
  created() {
  },
  methods: {
    //查询手机号是否存在
    seachRepeat2(contactMobile, index) {
      if (contactMobile != '') {
        checkContactMobile({
          contactMobile:contactMobile,
          customerId: this.sendForm.customerId ? this.sendForm.customerId : 0
        }).then((res) => {
        }).catch((rej) => {
          if (rej.code == 10000 || rej.code == 10001) {
            this.$message.error(rej.msg);
            this.sendForm.contactMobile = '';
          }
        })
      }
    },
    // 获取客户信息配置
    getCustomerInfo() {
      getCustomerInfoAPI({tab:7}).then((res) => {
        this.contactDutyList=res;
      })
    },
    //显示编辑/新增产品
    showPop(type, item, contactDutyProp) {
      this.title4 = type == 'add' ? '新增联系人' : type == 'edit' ? '编辑联系人' : '查看联系人';
      this.materialDialogType = type;
      this.dialogVisible4 = true;
      this.getCustomerInfo();
      if (type == 'add') {
        this.sendForm = JSON.parse(JSON.stringify(defaultsendForm));
        this.sendForm.customerId = item.customerId;
        this.sendForm.customerName = item.customerName;
        if (contactDutyProp) {
          this.sendForm.contactDuty = contactDutyProp;
        }
      } else {
        for (let key in item) {
          this.sendForm[key]= item[key] || item[key]===0 ? item[key]: defaultsendForm[key]
        }
        this.sendForm.isBuyPermission = +item.isBuyPermission;
        this.sendForm.isMainContact = +item.isMainContact;
        console.log(this.sendForm)
      }
    },
    //关闭客户使用材料
    handleClose4() {
      this.$refs.sendFormRef.clearValidate();
      this.dialogVisible4 = false;
      this.btnLoading4 = false;
    },
    //提交客户使用材料
    handleConfirm4() {
      this.$refs.sendFormRef.validate((valid) => {
        if (valid) {
          this.btnLoading4 = true;
          editContactAPI(this.sendForm).then(() => {
            this.btnLoading4 = false;
            this.$message.success('操作成功')
            this.handleClose4();
            this.$emit('update',this.sendForm)
          }).catch(() => {
            this.btnLoading4 = false;
          })
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">

</style>
